<template>
  <view class="message-container">
    <!-- 消息列表 -->
    <view class="message-list">
      <view class="message-item" v-for="(item, index) in messageList" :key="index" @tap="handleMessageClick(item)">
        <view class="avatar">
          <image :src="item.avatar" mode="aspectFill"></image>
          <view class="badge" v-if="item.unread">{{item.unread}}</view>
        </view>
        <view class="content">
          <view class="top">
            <text class="name">{{item.name}}</text>
            <text class="time">{{item.time}}</text>
          </view>
          <view class="bottom">
            <text class="last-message">{{item.lastMessage}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messageList: [
        {
          avatar: '/static/avatar/default.png',
          name: '系统通知',
          time: '12:30',
          lastMessage: '您的账号已完成实名认证',
          unread: 2
        },
        {
          avatar: '/static/avatar/user1.png',
          name: '张三',
          time: '昨天',
          lastMessage: '好的，明天见',
          unread: 0
        },
        {
          avatar: '/static/avatar/user2.png',
          name: '李四',
          time: '星期一',
          lastMessage: '收到了，谢谢',
          unread: 1
        }
      ]
    }
  },
  methods: {
    handleMessageClick(item) {
      // 处理消息点击事件
      console.log('点击消息:', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.message-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  
  .message-list {
    .message-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      
      .avatar {
        position: relative;
        width: 88rpx;
        height: 88rpx;
        margin-right: 20rpx;
        
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        
        .badge {
          position: absolute;
          top: -6rpx;
          right: -6rpx;
          background-color: #ff4d4f;
          color: #fff;
          font-size: 24rpx;
          min-width: 32rpx;
          height: 32rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 6rpx;
        }
      }
      
      .content {
        flex: 1;
        
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .name {
            font-size: 32rpx;
            color: #333;
            font-weight: 500;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .bottom {
          .last-message {
            font-size: 28rpx;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
